;
(function() {
	// 工具类名
	TempoMineChartUtils = {};

	// 条状图默认填充色
	TempoMineChartUtils.HISTOGRM_DEFAULT_FILLCOLOR="rgba(127, 201, 127,1)";
	// 图例色1
	TempoMineChartUtils.FILLCOLOR1="rgba(26, 188, 156,1)";
	// 图例色2
	TempoMineChartUtils.FILLCOLOR2="rgba(52, 152, 219,1)";
	// 图例色3
	TempoMineChartUtils.FILLCOLOR3="rgba(231, 76, 60,1)";
	// 图形字体
	TempoMineChartUtils.CHARTFAMILY="Microsoft Yahei";
	/**
	 * 默认系列颜色组
	 * */
	TempoMineChartUtils.DEFAULT_COLORS = [
	    [
	        "#dd6b66", "#759aa0", "#e69d87", "#8dc1a9", "#ea7e53", "#eedd78", "#73a373", "#73b9bc", "#7289ab", "#91ca8c"
		],
		[
		    "#c1232b", "#27727b", "#fcce10", "#e87c25", "#b5c334", "#fe8463", "#9bca63", "#fad860", "#f3a43b", "#60c0dd"
		],
		[
		    "#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3", "#e5cf0d", "#97b552", "#95706d", "#dc69aa"
		]
	]

	/**
	 * 示例方法
	 */
	TempoMineChartUtils.methodA = function() {
		console.log("this is an example")
	},
	/**
	 * 返回绘图的步长
	 * @para1 值域最小值到最大值	[0,50]
	 * @para2 刻度个数
	 */
	TempoMineChartUtils._getStep = function(domain,m){
		if(m==null){
			m=24;
		}
		var extent = TempoMineChartUtils._scaleExtent(domain);
		var span = extent[1] - extent[0];
		var step = Math.pow(10,Math.floor(Math.log(span/m)/Math.LN10));
		var err = m/span*step;
		if(err <= 0.15){
			step *= 10;
		}else if(err <= 0.35){
			step *= 5;
		}else if(err <= 0.75){
			step *= 2;
		}
		return step;
	},
	TempoMineChartUtils._scaleExtent = function(domain){
		var start = domain[0];
		var stop = domain[domain.length - 1];
		return start < stop ? [start,stop] : [stop,start] ;
	},
	/**
	 * 自相关偏自相关图形
	 * @param dataset = [-99,99,11,21,8,189,16,-12,-19,5,-8,9,-7,22,11,21,8,18,16,-12,-19,5,-8,9,-7];
	 * @param container div容器
	 */
	TempoMineChartUtils.getAcfOrPacfChart = function(dataset,container){
		container.html("");
//		dataset = [-99,99,11,21,8,189,16,-12,-19,5,-8,9,-7,22,11,21,8,18,16,-12,-19,5,-8,9,-7];
		//定义SVG宽高
		var height = 400;
		var width = 800;
		//定义SVG跟容器的边距
		var padding = {top:20,right:20,bottom:20,left:50};
		//定义坐标轴宽高
		var xAxisWidth = width - padding.left - padding.right;
		var yAxisWidth = height - padding.bottom - padding.top;
		//定义svg
		var svg = d3.select(container[0]).append("svg").attr("height",height).attr("width",width);
		//定义defs
		var defs = svg.append("defs");
		//设置渐变色使柱图呈现立体效果-begin
		var linearGradient = defs.append("linearGradient")
		.attr("id","linearColor"+new Date().getTime())
		.attr("x1","0%")
		.attr("y1","0%")
		.attr("x2","100%")
		.attr("y2","0%")
		var stop1 = linearGradient.append("stop")
		.attr("offset","0%")
		.style("stop-color","#800307");
		var stop2 = linearGradient.append("stop")
		.attr("offset","50%")
		.style("stop-color","#999999");
		var stop3 = linearGradient.append("stop")
		.attr("offset","100%")
		.style("stop-color","#800307");
		//设置渐变色使柱图呈现立体效果end
		//判断数据中是否有负值，有负数的情况下，坐标轴是从中间开始
		var negativeFlag = d3.min(dataset) < 0;
		//横向缩放
		var xScale = d3.scale.ordinal()
		.domain(d3.range(dataset.length).map(function(e){return e+1;}))
		.rangeRoundBands([0,xAxisWidth],0.5);
		//纵向缩放
		//负值的情况下需要特殊定义
		var yScaleDomainArray;
		var yScaleRangeArray;
		if(negativeFlag){
			var maxAbsVal = Math.max(Math.abs(d3.min(dataset)),d3.max(dataset));
			yScaleDomainArray = [-maxAbsVal ,maxAbsVal];
			yScaleRangeArray = [-yAxisWidth/2,yAxisWidth/2];
		}else{
			yScaleDomainArray = [0 ,d3.max(dataset)];
			yScaleRangeArray = [0,yAxisWidth];
		}
		var yScale = d3.scale.linear()
		.domain(yScaleDomainArray)
		.range(yScaleRangeArray);
		//绘制各个柱.attr("fill","#800307")
		var rect = svg.selectAll("rect")
		.data(dataset)
		.enter()
		.append("rect")
		.attr("fill","url(#" + linearGradient.attr("id") + ")")
		.attr("x",function(d,i){
			return padding.left + xScale(i + 1);
		})
		.attr("y",function(d){
			//数据包含负数的情况下做除以2处理
			if(negativeFlag){
				if(d > 0 || d == 0){
					return (height - padding.bottom + padding.top)/2 - yScale(d);
				}else{
					return (height - padding.bottom + padding.top)/2;
				}
			}else{
				return height - padding.bottom - yScale(d);
			}
		})
		.attr("width",xScale.rangeBand())
		.attr("height",function(d){
			return Math.abs(yScale(d));
		});
		//X轴
		//因为d3.svg.axis().ticks(12)为止原因不起效，所以这里自己计算步长
		var step = TempoMineChartUtils._getStep([0,dataset.length],24);
		var tickVals = [];
		for (var i = 0; i < dataset.length + step; i += step) {
			tickVals.push(i);
		}
		var xAxis = d3.svg.axis()
		.scale(xScale)
		.tickValues(tickVals)
		.orient("bottom");
		yScale.range([yAxisWidth,0]);
		//Y轴
		var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient("left");
		//定义G标签存放，X轴元素
		svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
		.call(xAxis);
		//定义G标签存放，Y轴元素
		svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + padding.left + "," + (padding.bottom) + ")")
		.call(yAxis);
		if(negativeFlag){
			svg.append("line")
			.attr("x1",padding.left)
			.attr("y1",(height - padding.bottom + padding.top)/2)
			.attr("x2",width)
			.attr("y2",(height - padding.bottom + padding.top)/2)
			.attr("stroke","black")
			.attr("stroke-width","1px")
			.attr("fill","black");
		}
	},
	/**
	 *  时间序列真实值与预测值比较折线图
	 *  @para oriData真实值
	 *  @para predicts预测值
	 *  @para container容器div
	 */
	TempoMineChartUtils.getLineChart = function(oriData,predicts,predictsUp,predictsDown,container,timeArray,featuresCol){
		container.html("");
		var dyadd = 130;//y轴和y轴上的坐标的偏移量
//		oriData = [-99,99,11,21,8,189,16,-12,-19,5,-8,9,-7,22,11,21,8,18,16,-12,-19,5,-8,9,-7];
		//定义SVG宽高
		var height = 500;
		var width = 800;
		//定义svg
		if(!timeArray || timeArray.length == 0){
			timeArray = [];
			for (var i = 0; i < predicts.length; i++) {
				timeArray.push(i);
			}
		}
		var svg = d3.select(container[0]).append("svg").attr("height",height).attr("width",width+dyadd);
		//定义SVG跟容器的边距
		var padding = {top:20,right:20,bottom:120,left:50};
		//定义坐标轴宽高
		var xAxisWidth = width - (padding.left + padding.right) - 80;
		var yAxisWidth = height - (padding.top + padding.bottom);
		//判断数据中是否有负值，有负数的情况下，坐标轴是从中间开始
		var negativeFlag = Math.min(d3.min(oriData),d3.min(predicts),d3.min(predictsUp),d3.min(predictsDown)) < 0;
		//最小数据条数
		var dataLength = Math.max(oriData.length,predicts.length,predictsUp.length,predictsDown.length);
		//横向缩放
		var xScale = d3.scale.linear()
		.domain([0,dataLength])
		.range([0,xAxisWidth]);
		//纵向缩放
		//负值的情况下需要特殊定义
		var yScaleDomainArray;
		var yScaleRangeArray;
		if(negativeFlag){
			//找出数据中绝对值最大值作为坐标轴的最大值
			var maxAbsVal = Math.max(d3.max(oriData),d3.max(predicts),d3.max(predictsUp),d3.max(predictsDown),
					Math.abs(d3.min(oriData)),Math.abs(d3.min(predicts)),Math.abs(d3.min(predictsUp)),Math.abs(d3.min(predictsDown)));
			maxAbsVal = maxAbsVal * 1.1;
			yScaleDomainArray = [-maxAbsVal ,maxAbsVal];
			yScaleRangeArray = [-yAxisWidth/2,yAxisWidth/2];
		}else{
			//找出数据中绝对值最大值作为坐标轴的最大值
			yScaleDomainArray = [0 , Math.max(d3.max(oriData),d3.max(predicts),d3.max(predictsUp),d3.max(predictsDown)) * 1.1];
			yScaleRangeArray = [0,yAxisWidth];
		}

		var yScale = d3.scale.linear()
		.domain(yScaleDomainArray)
		.range(yScaleRangeArray);
		//构建折线数据
		var ds1 = {series : "oriData",data:[]};
		var ds2 = {series : "predicts",data:[]};
		var ds3 = {series : "predictsUp",data:[]};
		var ds4 = {series : "predictsDown",data:[]};

		for (var i = 0; i < oriData.length; i++) {
			ds1.data.push([i,oriData[i]]);
		}
		for (var i = 0; i < predicts.length; i++) {
			ds2.data.push([i,predicts[i]]);
		}
		for (var i = 0; i < predictsUp.length; i++) {
			ds3.data.push([i,predictsUp[i]]);
		}
		for (var i = 0; i < predictsDown.length; i++) {
			ds4.data.push([i,predictsDown[i]]);
		}
		var dataset = [ds1,ds2,ds3,ds4];
		//定义一个直线生成器
		var linePath = d3.svg.line().x(function(d){
			return xScale(d[0]);
		})
		.y(function(d){
			if(negativeFlag){
				return (height - padding.bottom - padding.top)/2 - yScale(d[1]);
			}else{
				return yScale(d[1]);
			}
		});
		var colors = ["#3498DB","#E74C3C","#1ABC9C","black"];
		if(!negativeFlag){
			yScale.range([yAxisWidth,0]);
		}
		//绘制折线
		var lines = svg.selectAll("path")
		.data(dataset)
		.enter()
		.append("path")
		.attr("fill","none")
		.attr("transform","translate(" + (padding.left+dyadd) + "," + padding.top + ")")
		.attr("d",function(d){return linePath(d.data);})
		.attr("stroke-width",1)
		.attr("stroke",function(d,i){ return colors[i]});
		//X轴
		//因为d3.svg.axis().ticks(12)为止原因不起效，所以这里自己计算步长
		var step = TempoMineChartUtils._getStep([0,dataLength],24);
		var tickVals = [];
		for (var i = 0; i < dataLength; i += step) {
			tickVals.push(timeArray[i]);
		}
		var xAxisScale = d3.scale.linear()
		.domain([0,timeArray.length])
		.range([0,xAxisWidth]);
		var xAxis = d3.svg.axis()
		.scale(xAxisScale)
		.tickFormat(function(v){
			var value = timeArray[v];
			return value;
			/*
			if (value < 1000) {
				return value;
			} else if (value < 1000000) {
				return (value / 1000) + "K";
			} else if (value < 1000000000){
				return (value / 1000000) + "M";
			} else {
				return (value / 1000000000) + "B";
			}*/
		})
		.orient("bottom");
		//Y轴
		if(negativeFlag){
			yScale.range([yAxisWidth,0]);
		}
		/*
		var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient("left");*/
		var yAxis = d3.svg.axis()
		.scale(yScale)
		.tickFormat(function(value){
			var valueAbs = Math.abs(value);
			if (valueAbs < 1000) {
				return value;
			} else if (valueAbs < 1000000) {
				return (value / 1000) + "K";
			} else if (valueAbs < 1000000000){
				return (value / 1000000) + "M";
			} else {
				return (value / 1000000000) + "B";
			}
		})
		.orient("left");

		//定义G标签存放，X轴元素
		svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + (padding.left + dyadd)+"," + (height - padding.bottom) + ")")
		.call(xAxis);
		svg.selectAll('text').attr('transform',function(d){
			return 'rotate(-75)';
		}).attr('x',function(d){
			return '-25';
		}).attr('y',function(d){
			return '5';
		});

		//定义G标签存放，Y轴元素
		svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + (padding.left+dyadd) + "," + padding.top + ")")
		.call(yAxis);
		if(negativeFlag){
		/*	svg.append("line")
			.attr("x1",padding.left+dyadd)
			.attr("y1",(height)/2)
			.attr("x2",width - 80)
			.attr("y2",(height)/2)
			.attr("stroke","black")
			.attr("stroke-width","1px")
			.attr("fill","black");*/
		}
		//oriData
		svg.append("rect")
		.attr("width", 90)
		.attr("height",20)
		.attr("x",width - 90+dyadd)
		.attr("y",height/2 - 55)
			.attr("fill",colors[0])
			.on("click",function(){
				var color = d3.select(this).attr("fill");
				if(color.toUpperCase() == "GRAY"){
					color = $(this).attr('fillbf');
				}
				if(container.find("path[stroke='"+color+"']").length > 0  && container.find("path[stroke='"+color+"']").css("display") != "none"){
					$(this).attr('fillbf',$(this).attr('fill'));
					$(this).attr('fill',"gray");
					container.find("path[stroke='"+color+"']").css("display","none");
				}else{
					$(this).attr('fill',$(this).attr('fillbf'));
					container.find("path[stroke='"+color+"']").css("display","block");
				}
			})
			.on("mousemove",function(){
				$(this).css("cursor","pointer");
			});
		svg.append("text")
			.attr("x",width - 85 + 40+dyadd)
			.attr("y",height/2 - 55)
			.attr("dy",15)
			.attr("fill","white")
			.attr("font-size","14px")
			.attr("text-anchor","middle")
			.text(TempoUtils.locale("mine.oriData"))
			.on("click",function(){
				var color = $(this).prev().attr("fill");
				if(color.toUpperCase() == "GRAY"){
					color = $(this).prev().attr('fillbf');
				}
				if(container.find("path[stroke='"+color+"']").length > 0  && container.find("path[stroke='"+color+"']").css("display") != "none"){
					$(this).prev().attr('fillbf',$(this).prev().attr('fill'));
					$(this).prev().attr('fill',"gray");
					container.find("path[stroke='"+color+"']").css("display","none");
				}else{
					$(this).prev().attr('fill',$(this).prev().attr('fillbf'));
					container.find("path[stroke='"+color+"']").css("display","block");
				}
			})
			.on("mousemove",function(){
				$(this).css("cursor","pointer");
			});

		//predicts
		svg.append("rect")
			.attr("width", 90)
			.attr("height",20)
			.attr("x",width - 90+dyadd)
			.attr("y",height/2 - 25)
			.attr("fill",colors[1])
			.on("click",function(){
				var color = d3.select(this).attr("fill");
				if(color.toUpperCase() == "GRAY"){
					color = $(this).attr('fillbf');
				}
				if(container.find("path[stroke='"+color+"']").length > 0  && container.find("path[stroke='"+color+"']").css("display") != "none"){
					$(this).attr('fillbf',$(this).attr('fill'));
					$(this).attr('fill',"gray");
					container.find("path[stroke='"+color+"']").css("display","none");
				}else{
					$(this).attr('fill',$(this).attr('fillbf'));
					container.find("path[stroke='"+color+"']").css("display","block");
				}
			})
			.on("mousemove",function(){
				$(this).css("cursor","pointer");
			});
		svg.append("text")
			.attr("x",width - 85 + 40+dyadd)
			.attr("y",height/2 - 25)
			.attr("dy",15)
			.attr("fill","white")
			.attr("font-size","14px")
			.attr("text-anchor","middle")
			.text(TempoUtils.locale("mine.predicts"))
			.on("click",function(){
				var color = $(this).prev().attr("fill");
				if(color.toUpperCase() == "GRAY"){
					color = $(this).prev().attr('fillbf');
				}
				if(container.find("path[stroke='"+color+"']").length > 0  && container.find("path[stroke='"+color+"']").css("display") != "none"){
					$(this).prev().attr('fillbf',$(this).prev().attr('fill'));
					$(this).prev().attr('fill',"gray");
					container.find("path[stroke='"+color+"']").css("display","none");
				}else{
					$(this).prev().attr('fill',$(this).prev().attr('fillbf'));
					container.find("path[stroke='"+color+"']").css("display","block");
				}
			})
			.on("mousemove",function(){
				$(this).css("cursor","pointer");
			});
		//predictsUp
		svg.append("rect")
			.attr("width", 90)
			.attr("height",20)
			.attr("x",width - 90 +dyadd)
			.attr("y",height/2 + 5)
			.attr("fill",colors[2])
			.on("click",function(){
				var color = d3.select(this).attr("fill");
				if(color.toUpperCase() == "GRAY"){
					color = $(this).attr('fillbf');
				}
				if(container.find("path[stroke='"+color+"']").length > 0  && container.find("path[stroke='"+color+"']").css("display") != "none"){
					$(this).attr('fillbf',$(this).attr('fill'));
					$(this).attr('fill',"gray");
					container.find("path[stroke='"+color+"']").css("display","none");
				}else{
					$(this).attr('fill',$(this).attr('fillbf'));
					container.find("path[stroke='"+color+"']").css("display","block");
				}
			})
			.on("mousemove",function(){
				$(this).css("cursor","pointer");
			});
		svg.append("text")
			.attr("x",width - 85 + 40+dyadd)
			.attr("y",height/2 + 5)
			.attr("dy",15)
			.attr("fill","white")
			.attr("font-size","14px")
			.attr("text-anchor","middle")
			.text(TempoUtils.locale("mine.predictsUp"))
			.on("click",function(){
				var color = $(this).prev().attr("fill");
				if(color.toUpperCase() == "GRAY"){
					color = $(this).prev().attr('fillbf');
				}
				if(container.find("path[stroke='"+color+"']").length > 0  && container.find("path[stroke='"+color+"']").css("display") != "none"){
					$(this).prev().attr('fillbf',$(this).prev().attr('fill'));
					$(this).prev().attr('fill',"gray");
					container.find("path[stroke='"+color+"']").css("display","none");
				}else{
					$(this).prev().attr('fill',$(this).prev().attr('fillbf'));
					container.find("path[stroke='"+color+"']").css("display","block");
				}
			})
			.on("mousemove",function(){
				$(this).css("cursor","pointer");
			});
		//predictsDown
		svg.append("rect")
			.attr("width", 90)
			.attr("height",20)
			.attr("x",width - 90+dyadd)
			.attr("y",height/2 + 35)
			.attr("fill",colors[3])
			.on("click",function(){
				var color = d3.select(this).attr("fill");
				if(color.toUpperCase() == "GRAY"){
					color = $(this).attr('fillbf');
				}
				if(container.find("path[stroke='"+color+"']").length > 0  && container.find("path[stroke='"+color+"']").css("display") != "none"){
					$(this).attr('fillbf',$(this).attr('fill'));
					$(this).attr('fill',"gray");
					container.find("path[stroke='"+color+"']").css("display","none");
				}else{
					$(this).attr('fill',$(this).attr('fillbf'));
					container.find("path[stroke='"+color+"']").css("display","block");
				}
			})
			.on("mousemove",function(){
				$(this).css("cursor","pointer");
			});
		svg.append("text")
			.attr("x",width - 85 + 40+dyadd)
			.attr("y",height/2 + 35)
			.attr("dy",15)
			.attr("fill","white")
			.attr("font-size","14px")
			.attr("text-anchor","middle")
			.text(TempoUtils.locale("mine.predictsDown"))
			.on("click",function(){
				var color = $(this).prev().attr("fill");
				if(color.toUpperCase() == "GRAY"){
					color = $(this).prev().attr('fillbf');
				}
				if(container.find("path[stroke='"+color+"']").length > 0  && container.find("path[stroke='"+color+"']").css("display") != "none"){
					$(this).prev().attr('fillbf',$(this).prev().attr('fill'));
					$(this).prev().attr('fill',"gray");
					container.find("path[stroke='"+color+"']").css("display","none");
				}else{
					$(this).prev().attr('fill',$(this).prev().attr('fillbf'));
					container.find("path[stroke='"+color+"']").css("display","block");
				}
			})
			.on("mousemove",function(){
				$(this).css("cursor","pointer");
			});
		svg.append("text")
		.attr("x",width/2)
		.attr("y",height - 40)
		.attr("dy",15)
		.attr("fill","black")
		.attr("font-size","14px")
		.attr("text-anchor","middle")
		.text("time");
		if(featuresCol){
			svg.append("text")
			.attr("x",-height/2)
			.attr("y",0)
			.attr("dy",15)
			.attr("fill","black")
			.attr("font-size","14px")
			.attr("text-anchor","middle")
			.attr("transform","rotate(-90)")
			.text(featuresCol);
		}
	}

	/***
	 * D3 绘制柱图 数值型,垂直布局
	 * dataStr:数据
	 * eleId:要展现图形的元素id
	 * width:宽度
	 * height:高度
	 * extraParam:可选参数， 包含padding,maxShowNum,fillColor,sumType（统计方式）
	 */
	TempoMineChartUtils.drawHistogramHorizontalNum = function(dataStr,eleId,width,height,extraParam){
		var toolTip = d3.select("body").append("div").attr("class","tempo-mine-histogram-tooltip").style("opacity",0.0);
		// 数据为空，则直接返回，不需要绘制直方图
		if (!dataStr || dataStr.trim() == ""){
			return;
		}
		var padding = { top: 20 , right: 20 , bottom: 50, left: 20};
		if (extraParam && extraParam.padding){
			padding = extraParam.padding;
		}
		var scatterWidth = width - padding.left - padding.right-40,
			scatterHeight = height - padding.top - padding.bottom;
		// 最多展示个数
		var maxShowNum = 5;
		if (extraParam && extraParam.maxShowNum){
			maxShowNum = extraParam.maxShowNum;
		}
		var dataObj;
		if (extraParam && extraParam.sumType){
			dataObj = TempoMineChartUtils.getNumericFormatData(dataStr,maxShowNum,extraParam.sumType);
		} else {
			dataObj = TempoMineChartUtils.getNumericFormatData(dataStr,maxShowNum);
		}
		// 列数量为0，则不绘制直方图
		if (dataObj.col.length == 0){
			return;
		}
		var svg = d3.select("#"+eleId).append("svg")
			.attr("width",width)
			.attr("height",height);
		var xScale = d3.scale.ordinal()
					   .domain(dataObj.col)
					   .rangeRoundBands([scatterHeight,0],0.5);
		var maxValue = d3.max(dataObj.showData);
		// 坐标轴默认分5段
		var ticks = 5;
		if (typeof(extraParam) != "undefined"){
			maxValue = dataObj.maxValue;
			ticks = dataObj.ticks;
		}
		var yScale = d3.scale.linear()
						.domain([0,maxValue])
					   .range([0,scatterWidth]);

		var rectWidth = xScale.rangeBand();
		// 偏移值
		var floatWidth = xScale(dataObj.col[0]);
		if (dataObj.col.length > 1){
			floatWidth = (xScale(dataObj.col[0])-xScale(dataObj.col[1]))/2;
		}
		var fillColor = TempoMineChartUtils.HISTOGRM_DEFAULT_FILLCOLOR;
		if (extraParam && extraParam.fillColor){
			fillColor = extraParam.fillColor;
		}
		var rect = svg.selectAll("rect")
						.data(dataObj.showData)
						.enter()
						.append("rect")
						.attr("fill",fillColor)
						.attr("x",function(d,i){
							return padding.left;
						})
						.attr("y",function(d,i){
							var curCol = dataObj.col[i+1];
							if (!curCol){
								curCol = dataObj.col[i];
							}
							return xScale(curCol)+padding.top+floatWidth;
						})
						.attr("height",rectWidth)
						.attr("width",function(d){
							return yScale(d);
						})
						.on('mouseover', function(d, i) {
							var pageY = d3.event.pageY;
							var pageX = d3.event.pageX;
							toolTip.html(d).style("top",(d3.event.pageY)+"px").style("left", (pageX)+"px").style("opacity", 1.0);
						}).on('mouseout', function(d) {
							var cord = d3.mouse(this);
							toolTip.style("opacity", 0.0);
						});
		var xAxis = d3.svg.axis().scale(xScale).orient("left").ticks(ticks);
		var yAxis = d3.svg.axis().scale(yScale).orient("bottom");

		var bottomEle = svg.append("g").attr("class","axisMin")
					   .attr("transform","translate("+padding.left+","+(scatterHeight + padding.top)+")")
					   .call(yAxis);
		var leftEle = svg.append("g").attr("class","axisMin")
		   .attr("transform","translate("+padding.left+","+padding.top+")")
		   .call(xAxis);
		// 增加频数和百分比的标签
		var labelText = TempoMineChartUtils.getSumTypeLabel(extraParam);
		TempoMineChartUtils.addLabel(bottomEle,labelText,scatterWidth+20,4);
		if (extraParam && extraParam.columnName && extraParam.columnName.trim()!=""){
			// 增加列名标签
			TempoMineChartUtils.addLabel(leftEle,extraParam.columnName,-10,-20,50);
		}
		svg.selectAll("text").style('font-family',TempoMineChartUtils.CHARTFAMILY);
	}

	/***
	 * D3 绘制柱图 数值型,垂直布局
	 * dataStr:数据
	 * eleId:要展现图形的元素id
	 * width:宽度
	 * height:高度
	 * extraParam:可选参数， 包含padding,maxShowNum,fillColor,sumType（统计方式）
	 */
	TempoMineChartUtils.drawHistogramVeriticalNum = function(dataStr,eleId,width,height,extraParam){
	    var toolTip = d3.select("body").append("div").attr("class","tempo-mine-histogram-tooltip").style("opacity",0.0);
		// 数据为空，则直接返回，不需要绘制直方图
		if (!dataStr || dataStr.trim() == ""){
			return;
		}
		var padding = { top: 20 , right: 10 , bottom: 55, left: 100};
		if (extraParam && extraParam.padding){
			padding = extraParam.padding;
		}
		// scatterWidth需要多减去30，否则横轴会超出svg的边界，显示不全
		var scatterWidth = width - padding.left - padding.right-50,
			scatterHeight = height - padding.top - padding.bottom;

		// 最多展示个数
		var maxShowNum = 5;
		if (extraParam && extraParam.maxShowNum){
			maxShowNum = extraParam.maxShowNum;
		}
		var dataObj;
		if (extraParam && extraParam.sumType){
			dataObj = TempoMineChartUtils.getNumericFormatData(dataStr,maxShowNum,extraParam.sumType);
		} else {
			dataObj = TempoMineChartUtils.getNumericFormatData(dataStr,maxShowNum);
		}
		// 列数量为0，则不绘制直方图
		if (dataObj.col.length == 0){
			return;
		}
		var svg;
		if (extraParam){
			// 图表
			svg = d3.select("#"+eleId).append("svg")
				.attr("width",width)
				.attr("height",height);
		} else {
			// 统计信息
			svg = d3.select("#"+eleId).append("svg")
				.attr("width","100%")
				.attr("height","100%");
		}
		var maxLen = 0;
		for (var i = 0; i < dataObj.col.length; i++) {
			if (dataObj.col[i].length > maxLen) {
				maxLen = dataObj.col[i].length;
			}
		}

		if (maxLen > 6) {
			for (var i = 0; i < dataObj.col.length; i++) {
				dataObj.col[i] = parseFloat(dataObj.col[i]).toExponential(1);
			}
		}

		var xScale = d3.scale.ordinal()
					   .domain(dataObj.col)
					   .rangeRoundBands([0,scatterWidth],0.5);
		var maxValue = d3.max(dataObj.showData);
		// 坐标轴默认分5段
		var ticks = 5;
		if (typeof(extraParam) != "undefined"){
			maxValue = dataObj.maxValue;
			ticks = dataObj.ticks;
		}

		var yScale = d3.scale.linear()
						.domain([0,maxValue])
					   .range([0,scatterHeight]);

		var rectWidth = xScale.rangeBand();
		// 偏移值
		var floatWidth = xScale(dataObj.col[0]);
		if (dataObj.col.length > 1){
			floatWidth = (xScale(dataObj.col[1])-xScale(dataObj.col[0]))/2;
		}
		var fillColor = TempoMineChartUtils.HISTOGRM_DEFAULT_FILLCOLOR;
		if (extraParam && extraParam.fillColor){
			fillColor = extraParam.fillColor;
		}
		var rect = svg.selectAll("rect")
						.data(dataObj.showData)
						.enter()
						.append("rect")
						.attr("fill",fillColor)
						.attr("x",function(d,i){
							return padding.left + xScale(dataObj.col[i])+floatWidth;
						})
						.attr("y",function(d){
							return scatterHeight + padding.top - yScale(d);
						})
						.attr("width",rectWidth)
						.attr("height",function(d){
							return yScale(d);
						}).on('mouseover', function(d, i) {
							var pageY = d3.event.pageY;
							var pageX = d3.event.pageX;
							toolTip.html(d).style("top",(d3.event.pageY)+"px").style("left", (pageX)+"px").style("opacity", 1.0);
						}).on('mouseout', function(d) {
							var cord = d3.mouse(this);
							toolTip.style("opacity", 0.0);
						});
		var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
		yScale.range([scatterHeight,0]);
		var yAxis = d3.svg.axis().scale(yScale).orient("left").tickSize(5, 5).ticks(ticks);

		var bottomEle = svg.append("g").attr("class","axisMin")
					   .attr("transform","translate("+padding.left+","+(scatterHeight + padding.top)+")")
					   .call(xAxis);
		svg.selectAll('text').attr('transform',function(d){
			return 'rotate(-75)';
		}).attr('x',function(d){
			return '-25';
		}).attr('y',function(d){
			return '0';
		});
		var leftEle = svg.append("g").attr("class","axisMin")
		   .attr("transform","translate("+padding.left+","+ padding.top +")")
		   .call(yAxis);
		if (extraParam){
			// 增加频数和百分比的标签
			var labelText = TempoMineChartUtils.getSumTypeLabel(extraParam);
			TempoMineChartUtils.addLabel(leftEle,labelText,-10,-20);
			if (extraParam.columnName && extraParam.columnName.trim()!=""){
				// 增加列名标签
				TempoMineChartUtils.addLabel(bottomEle,extraParam.columnName,scatterWidth+20,4,5);
			}
		}
		svg.selectAll("text").style('font-family',TempoMineChartUtils.CHARTFAMILY);
	}

	/***
	 * D3 绘制柱图 名词型
	 * dataStr:数据
	 * eleId:要展现图形的元素id
	 * width:宽度
	 * height:高度
	 * extraParam:可选参数， 包含padding,maxShowNum,fillColor,dataArry(字符值数组),valueArray(频数或频率数组),sumType（统计方式）[统计信息直方图，该参数为空]
	 */
	TempoMineChartUtils.drawHistogramHorizontalChar = function(dataStr,eleId,width,height,extraParam){
		var toolTip = d3.select("body").append("div").attr("class","tempo-mine-histogram-tooltip").style("opacity",0.0);
		var padding = {top:20,right:20,bottom:20,left:100};
		if (extraParam && extraParam.padding){
			padding = extraParam.padding;
		}
		// 减50，留出显示标签的位置
		var scatterWidth = width - padding.left - padding.right,
			scatterHeight = height - padding.top - padding.bottom;
		// 最多展示个数
		var maxShowNum = 8;
		if (extraParam && extraParam.maxShowNum){
			maxShowNum = extraParam.maxShowNum;
		}
		var dataObj;
		if (extraParam && extraParam.dataArry && extraParam.valueArray){
			dataObj = TempoMineChartUtils.getCharFormatDataByArray(extraParam.dataArry,extraParam.valueArray,maxShowNum,extraParam.sumType);
		} else {
			// 数据为空，则直接返回，不需要绘制直方图
			if (!dataStr || dataStr.trim() == ""){
				return;
			}
			dataObj = TempoMineChartUtils.getCharFormatDataByStr(dataStr,maxShowNum);
		}
		var dd = dataObj.data;
		var cold = dataObj.col;

		var svg;
		if (extraParam){
			// 图表
			svg = d3.select("#"+eleId).append("svg")
				.attr("width",width)
				.attr("height",height);
		} else {
			// 统计信息
			svg = d3.select("#"+eleId).append("svg")
				.attr("width","100%")
				.attr("height","100%");
		}
		// 坐标轴最大值处理
		var maxValue = d3.max(dd);
		if (dataObj.maxValue){
			maxValue = dataObj.maxValue;
		}
		var xScale = d3.scale.linear()
					   .domain([0,maxValue])
					   .range([0,scatterWidth]);

		var yScale = d3.scale.ordinal()
						.domain(cold)
						.rangeRoundBands([0, scatterHeight],0.5);
		var rectMargin = 10;
		var fillColor = TempoMineChartUtils.HISTOGRM_DEFAULT_FILLCOLOR;
		if (extraParam && extraParam.fillColor){
			fillColor = extraParam.fillColor;
		}
		var rect = svg.selectAll("rect")
						.data(dd)
						.enter()
						.append("rect")
						.attr("fill",fillColor)
						.attr("x",function(d,i){
							return padding.left;
						})
						.attr("y",function(d,i){
							return padding.top + yScale(cold[i]);
						})
						.attr("width",function(d){
							if(d){
								return xScale(d);
							}else{
								return 0;
							}
						})
						.attr("height",yScale.rangeBand())
						.on('mouseover', function(d, i) {
							var pageY = d3.event.pageY;
							var pageX = d3.event.pageX;
							toolTip.html(d).style("top",(d3.event.pageY)+"px").style("left", (pageX)+"px").style("opacity", 1.0);
						}).on('mouseout', function(d) {
							var cord = d3.mouse(this);
							toolTip.style("opacity", 0.0);
						});
		// 坐标轴默认分5段
		var ticks = 5;
		if (dataObj.ticks){
			ticks = dataObj.ticks;
		} else {
			// 统计信息直方图x轴坐标显示处理，若x轴最大值比较大，则需要处理，否则数字会重叠
			if (maxValue > 99999999){
				ticks = 2;
			} else if (maxValue > 9999){
				ticks = 3;
			}
		}
		var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(ticks);
		var yAxis = d3.svg.axis().scale(yScale).orient("left");
		var bottomEle = svg.append("g").attr("class","axisMin")
					   .attr("transform","translate("+padding.left+","+(scatterHeight + padding.top)+")")
					   .call(xAxis);
		var leftEle = svg.append("g").attr("class","axisMin")
		   .attr("transform","translate("+padding.left+","+ padding.top +")")
		   .call(yAxis);
		// 标签tooltip
		leftEle.selectAll("g").append("title")
					.data(cold)
					.text(function(d,i){
						return d;
					});
		TempoMineChartUtils.dealShowName(leftEle,extraParam);
		if (extraParam){
			// 增加频数和百分比的标签
			var labelText = TempoMineChartUtils.getSumTypeLabel(extraParam);
			TempoMineChartUtils.addLabel(bottomEle,labelText,scatterWidth+20,4, extraParam.labelMaxLength);
			if (extraParam.columnName && extraParam.columnName.trim()!=""){
				// 增加列名标签
				TempoMineChartUtils.addLabel(leftEle,extraParam.columnName,-10,-20,50);
			}
		}
		svg.selectAll("text").style('font-family',TempoMineChartUtils.CHARTFAMILY);
	}

	/***
	 * D3 绘制柱图 名词型，垂直布局
	 * dataStr:数据
	 * eleId:要展现图形的元素id
	 * width:宽度
	 * height:高度
	 * extraParam:可选参数， 包含padding,maxShowNum,fillColor
	 */
	TempoMineChartUtils.drawHistogramVeriticalChar = function(dataStr,eleId,width,height,extraParam){
		var toolTip = d3.select("body").append("div").attr("class","tempo-mine-histogram-tooltip").style("opacity",0.0);
		var padding = {top:50,right:20,bottom:20,left:50};
		if (extraParam && extraParam.padding){
			padding = extraParam.padding;
		}
		var scatterWidth = width - padding.left - padding.right,
			scatterHeight = height - padding.top - padding.bottom;
		// 最多展示个数
		var maxShowNum = 5;
		if (extraParam && extraParam.maxShowNum){
			maxShowNum = extraParam.maxShowNum;
		}
		var dataObj;
		if (extraParam && extraParam.dataArry && extraParam.valueArray){
			dataObj = TempoMineChartUtils.getCharFormatDataByArray(extraParam.dataArry,extraParam.valueArray,maxShowNum,extraParam.sumType);
		} else {
			// 数据为空，则直接返回，不需要绘制直方图
			if (!dataStr || dataStr.trim() == ""){
				return;
			}
			dataObj = TempoMineChartUtils.getCharFormatDataByStr(dataStr,maxShowNum);
		}
		var dd = dataObj.data;
		var cold = dataObj.col;
		// 坐标轴最大值处理
		var maxValue = d3.max(dd);
		if (dataObj.maxValue){
			maxValue = dataObj.maxValue;
		}
		var svg = d3.select("#"+eleId).append("svg")
			.attr("width",width)
			.attr("height",height);
		// 数值坐标轴，domain控制值，range控制数值显示顺序
		var xScale = d3.scale.linear()
					   .domain([0,maxValue])
					   .range([scatterHeight,0]);

		var yScale = d3.scale.ordinal()
						.domain(cold)
						.rangeRoundBands([0, scatterWidth],0.5);
		// 柱子的宽度
		var rectWidth = yScale.rangeBand()
		// X轴初始偏移量
		var initX = rectWidth/2;
		// x坐标 刻度的之间的实际值
		var xReg = yScale(cold[1])-yScale(cold[0])-rectWidth;
		// x坐标 刻度的之间的刻度值 的 差
		var xTick = parseFloat(cold[1] -cold[0]).toFixed(2);
		var rectMargin = 10;
		var fillColor = TempoMineChartUtils.HISTOGRM_DEFAULT_FILLCOLOR;
		if (extraParam && extraParam.fillColor){
			fillColor = extraParam.fillColor;
		}
		var rect = svg.selectAll("rect")
						.data(dd)
						.enter()
						.append("rect")
						.attr("fill",fillColor)
						.attr("y",function(d,i){
							// 柱子y坐标
							return padding.top+xScale(d);
						})
						.attr("x",function(d,i){
							// 柱子x坐标
							return yScale(cold[i])+padding.left;
						})
						.attr("height",function(d){
							// 柱子高度
							return scatterHeight-xScale(d);
						})
						.attr("width",yScale.rangeBand())
						.on('mouseover', function(d, i) {
							var pageY = d3.event.pageY;
							var pageX = d3.event.pageX;
							toolTip.html(d).style("top",(d3.event.pageY)+"px").style("left", (pageX)+"px").style("opacity", 1.0);
						}).on('mouseout', function(d) {
							var cord = d3.mouse(this);
							toolTip.style("opacity", 0.0);
						});
		// 坐标轴默认分5段
		var ticks = 5;
		if (dataObj.ticks){
			ticks = dataObj.ticks;
		}
		var xAxis = d3.svg.axis().scale(yScale).orient("bottom");
		var yAxis = d3.svg.axis().scale(xScale).orient("left").ticks(ticks);

		var bottomEle = svg.append("g").attr("class","axisMin")
					   .attr("transform","translate("+padding.left+","+(scatterHeight + padding.top)+")")
					   .call(xAxis);
		var leftEle = svg.append("g").attr("class","axisMin")
		   .attr("transform","translate("+padding.left+","+ padding.top +")")
		   .call(yAxis);
		// 标签tooltip
		bottomEle.selectAll("g").append("title")
					.data(cold)
					.text(function(d,i){
						return d;
					});
		if(extraParam["notAutoModifyName"] != null && extraParam["notAutoModifyName"] == false){
			var showNums = Math.floor(rectWidth/7)-1;
			bottomEle.selectAll("text").text(function(name){
				if (name.length > showNums){
					name = name.substring(0,showNums)+"...";
				}
				return name;
			});
		}else{
			TempoMineChartUtils.dealShowName(bottomEle,extraParam);
		}
		// 增加频数和百分比的标签
		var labelText = TempoMineChartUtils.getSumTypeLabel(extraParam);
		TempoMineChartUtils.addLabel(leftEle,labelText,-10,-20);
		if (extraParam && extraParam.columnName && extraParam.columnName.trim()!=""){
			// 增加列名标签
			TempoMineChartUtils.addLabel(bottomEle,extraParam.columnName,scatterWidth+20,4,5);
		}
		svg.selectAll("text").style('font-family',TempoMineChartUtils.CHARTFAMILY);
	}

	/**
	 * 解析字符串为数值型柱图格式
	 * sumType:统计方式,默认频数
	 */
	TempoMineChartUtils.getNumericFormatData = function(dataStr,maxShowNum,sumType){
		var datasetObj = {data:[],col:[],percent:[]};
		var colArr = dataStr.split(" : ");
		var index = 0;
		for(var i=0;i<colArr.length;i++){
			var arr = colArr[i].split(" ");
			// 若arr长度小于3，则格式不对，直接跳过
			if (arr.length<3){
				continue;
			}
			if(i==0){
				datasetObj.col.push(parseFloat(arr[0]).toFixed(2));
				datasetObj.col.push(parseFloat(arr[1]).toFixed(2));
				datasetObj.data.push(parseInt(arr[2]));
				datasetObj.percent.push(parseFloat(arr[3])*100);
			}else{
				if (parseFloat(arr[1]) > 0){
					// 数值
					datasetObj.col.push(parseFloat(arr[0]).toFixed(2));
					// 频数
					datasetObj.data.push(parseInt(arr[1]));
					// 百分比
					datasetObj.percent.push((parseFloat(arr[2])*100).toFixed(2));
					index++;
				}
				if (index >= maxShowNum){
					break;
				}
			}
		}
		var ticksAndDomain;
		if (sumType == "percent"){
			ticksAndDomain = TempoMineChartUtils.getHistogramTicksAndDomain(datasetObj.percent,sumType);
			datasetObj.showData = datasetObj.percent;
		} else {
			ticksAndDomain = TempoMineChartUtils.getHistogramTicksAndDomain(datasetObj.data,sumType);
			datasetObj.showData = datasetObj.data;
		}
		datasetObj.maxValue = ticksAndDomain.maxValue;
		datasetObj.ticks = ticksAndDomain.ticks;
		return datasetObj;
	}

	/**
	 * 解析字符串为名词型柱图格式(统计频数),主要用于统计信息中的直方图展示，区间分5个
	 * maxShowNum：最大展示个数
	 * ticks:频数坐标轴区间个数
	 */
	TempoMineChartUtils.getCharFormatDataByStr = function(dataStr,maxShowNum,ticks){
		if (!ticks){
			ticks = 5;
		}
		var datasetObj = {data:[],col:[]};
		var colArr = dataStr.split(" : ");
		var index = 0;
		for(var i=0;i<colArr.length;i++){
			var j = colArr[i].lastIndexOf(" ");
			var arr=[colArr[i].substring(0,j),colArr[i].substring(j+1)];
			if (parseFloat(arr[1]) > 0){
				// 统计信息，展示3个字符
				datasetObj.col.push(arr[0]);
				datasetObj.data.push(parseInt(arr[1]));
				index++;
			}
			if (index >= maxShowNum){
				datasetObj.col.push("...");
				break;
			}
		}
		// 设置区间最大值
		var maxValue = d3.max(datasetObj.data);
		if (maxValue%ticks == 0){
			datasetObj.maxValue = maxValue + ticks;
		} else {
			datasetObj.maxValue = (parseInt(maxValue/ticks)+1)*ticks;
		}
		return datasetObj;
	}

	/**
	 * 解析字符串为名词型柱图格式,并计算出坐标轴分段个数（最大为10）及区间最大值
	 * maxShowNum：最大展示个数
	 * datas:字符值数组
	 * value:频数或频率数组
	 * sumType；统计方式，frequent频数，percent频率
	 */
	TempoMineChartUtils.getCharFormatDataByArray = function(datas,values,maxShowNum,sumType){
		var datasetObj = {data:[],col:[]};
		var index = 0;
		for(var i=0;i<datas.length;i++){
			var value = parseFloat(values[i]);
			if (sumType == "frequent"){
				value = parseInt(values[i]);
			}
			if (value > 0){
				datasetObj.col.push(datas[i]);
				datasetObj.data.push(value);
				index++;
			}
			if (index >= maxShowNum){
				datasetObj.col.push("...");
				break;
			}
		}
		var ticksAndDomain = TempoMineChartUtils.getHistogramTicksAndDomain(values,sumType);
		datasetObj.maxValue = ticksAndDomain.maxValue;
		datasetObj.ticks = ticksAndDomain.ticks;
		return datasetObj;
	}

	/**
	 * 获取坐标轴分段个数（最大为10）及区间最大值
	 */
	TempoMineChartUtils.getHistogramTicksAndDomain = function(datas,sumType){
		// 分段个数
		var ticks = 10;
		// datas数据格式化
		for (var i=0;i<datas.length;i++){
			if (TempoUtils.isInt(datas[i])){
				datas[i] = parseInt(datas[i]);
			} else {
				datas[i] = parseFloat(datas[i]);
			}
		}
		// 区间最大值
		var maxValue = parseFloat(d3.max(datas));
		var result = {"ticks":ticks,"maxValue":maxValue};
		// 若统计频数，则分段区间值需为整数,区间最大值需更改，不能使柱子最大值占满整个坐标轴
		if (sumType == "frequent"){
			// 频数
			if (maxValue%ticks == 0){
				result.maxValue = maxValue + ticks;
			} else {
				result.maxValue = (parseInt(maxValue/ticks)+1)*ticks;
			}
		} else {
			// 频率
			result.maxValue = maxValue + maxValue/ticks;
		}
		return result;
	}

	/**
	 * 传入一个字符串与最大显示长度，若该字符串超出显示长度，则进行截取，并添加...，否则返回原值
	 * svgEle：图形对象
	 * flag：是否统计信息，统计信息的直方图最多显示3个字符，其他最多展示6个字符
	 */
	TempoMineChartUtils.dealShowName = function(svgEle,flag){
		if (!flag){
			// 统计信息直方图
			svgEle.selectAll("text").text(function(name){
				return dealCharWithEllipsis(name, 10);
			})
		} else {
			// 图表直方图
			svgEle.selectAll("text").text(function(name){
				return dealCharWithEllipsis(name, 10);
			})
		}
	}
	/**
	 * @param maxLength：指的是英文长度
	 * 计算字符长度，根据实际占用，中文占2个长度，ascii字符占一个，来截取显示
	 */
	var dealCharWithEllipsis = function(name, maxLength) {
		if(!name || name <= maxLength) return name;
		var _size = 0;
		for(var i = 0; i < name.length; i++) {
			if(name.charCodeAt(i) > 255) {
				_size += 2;
			} else {
				_size += 1;
			}
			if(_size > maxLength) {
				return name.substr(0, i - 1) + "...";
			}
		}
		return name;
	}

	/**
	 * 直方图增加标签
	 * svg:需要添加到的svg
	 * text:标签名称
	 * x:x坐标
	 * y:y坐标
	 * maxLength:名称最大显示长度，默认为5
	 */
	TempoMineChartUtils.addLabel = function(parentSvg,text,x,y,maxLength){
		if (!maxLength){
			maxLength = 5;
		}
		var showName = text;
		if (showName.length > maxLength){
			showName = showName.substring(0,maxLength-2)+"...";
		}
		parentSvg.append("text")
			.attr("y",y)
			.attr("x",x)
			.attr("font-weight","bold")
			.style('font-family',TempoMineChartUtils.CHARTFAMILY)
			.text(showName);
		// 标签tooltip
		parentSvg.append("title")
			.text(text);
	}

	/**
	 * 根据传入的计算方式返回“频数”“频率”标签
	 * extraParam.sumType:若传入percent，则返回“频率”
	 */
	TempoMineChartUtils.getSumTypeLabel = function(extraParam){
		if (!extraParam){
			return TempoUtils.locale("mine.base_graph_frequent");
		}
		// 坐标轴上展示的名称
		if (extraParam.showName){
			return extraParam.showName;
		}
		if (extraParam && extraParam.sumType == "percent"){
			return TempoUtils.locale("mine.base_graph_percent");
		} else {
			return TempoUtils.locale("mine.base_graph_frequent");
		}
	}


	/**
	 * 对字符串进行截取
	 * @param value
	 * @paran len
	 */
	TempoMineChartUtils.fixTrim = function(value, len) {
		var total = 0;
		var values = (value || '').split('');
		var fv = values.filter(function(v) {
			if(total < len) {
				encodeURI(v).split('%').forEach(function(e) {
					if(e.length) total++;
				})
				return true;
			} else {
				return false;
			}
		})
		if(fv.length == values.length) {
			return value;
		} else {
			return fv.join('') + '...';
		}
	}

	/**
	 * 绘制变量重要性的d3图
	 */
	TempoMineChartUtils.drawVarImportanceChart = function(var2Importance, domEle, width, height, customLabel){
		var parentDiv = $(domEle).parent();
		var importanceLabel = TempoUtils.locale("mine.bianliangzhongyaoxing");
		if (customLabel) {
			importanceLabel = customLabel + TempoUtils.locale("mine.bianliangzhongyaoxing");
		}
		var downLoadBtn = "<div class='tempo-mine-var-importance-download'><label style='font-size:14px;padding-right: 30px;font-weight: bold;'>"+importanceLabel+"</label><button id='tempo-mine-var-importance-download-btn'  style='background: #f8fafd;height:28px;border: 1px solid #D7DDE5;width:110px;margin-left: 40px;padding-right: 10px;padding-left: 10px;font-size: 13px;'>"+TempoUtils.locale("mine.downall")+"</button></div>"
		//导出word需要做特殊处理
		if(parentDiv.find(".tempo-mine-alg-config-page").length == 1){
			parentDiv.find(".tempo-mine-alg-config-page").after(downLoadBtn);
		} else {
			parentDiv.prepend(downLoadBtn);
		}
		parentDiv.find("#tempo-mine-var-importance-download-btn").button({
			icon:"ui-icon tempo-ui-icon tempo-ui-icon-no-mutual tempo-ui-icon-mine-download"
		});

		/**
		 * 得到颜色渐变的函数
		 */
		var colorFunction = TempoUtils.gradientColor({
			from:"#c8e9ff",
			to:"#0074cb"
		}, 0, 1);

		/**
		 * 根据变量重要性获取相应的颜色rbg
		 */
		var getColorByImportance = function(importance) {
			return colorFunction({value:importance});
		}

		/**
		 * 在svg上增加图例
		 */
		var addLegend = function(svg, args){
			if (!$.isEmptyObject(args)) {
				var legendDatas = [];
				var labelColors = [];
				var i = 0;
				for (var color in args) {
					labelColors.push(color);
					var item = {};
					item.name = args[color];
					item.index = i;
					legendDatas.push(item)
					i++;
				}

				var legend = svg.selectAll(".legend").data(legendDatas)
				.enter().append("g")
				.attr("class","legend")
				.attr("tansform",function(d,i){
					return "translate(0,100)";
				});

				// 标签名称
				legend.append("text")
							.attr("y",function(d){return 25;})
							.attr("x",function(d,i){
								return 60+100*i;
							})
							.data(legendDatas)
							.attr("dx","5em")
							.attr("dy",".35em")
							.attr("text-anchor","start")
							.text(function(d,i){
								return d.name;
							});
				// 标签颜色
				legend.append("circle")
							.attr("r",function(d){return 6;})
							.attr("cx",function(d,i){
								return 100+100*i;
							})
							.data(legendDatas)
							.attr("cy",function(d){return 25;})
							.attr("fill",function(d,i){
								return labelColors[d.index];
							});

			}
		}

		if ($.isEmptyObject(var2Importance)) {
			return;
		}
		var MAX_COLUMN_NUM = 20;
		var allVarsSorted = Object.keys(var2Importance).sort(function(a,b){
			return var2Importance[b] - var2Importance[a]
		});
		var varImportanceSorted = [];
		varImportanceSorted.push([TempoUtils.locale("mine.filedname"),TempoUtils.locale("mine.bianliangzhongyaoxing")]);
		for (var i = 0; i < allVarsSorted.length; i++) {
			var itemArr = [allVarsSorted[i]];
			var importanceValue = TempoMineUtils.format(var2Importance[allVarsSorted[i]]);
			itemArr.push(importanceValue);
			varImportanceSorted.push(itemArr);
		}
		parentDiv.find("#tempo-mine-var-importance-download-btn").button({
			click:function(e) {
				TempoUtils.downLoadFile({
					url: contextPath + "/api/ai/mineresource/downloadImportance",
					data : {
						importanceDatas:JSON.stringify(varImportanceSorted)
					}
				});
			}
		});
		var varsSorted = [];
		if (allVarsSorted.length > MAX_COLUMN_NUM) {
			for (var i = 0; i < MAX_COLUMN_NUM; i++) {
				varsSorted.push(allVarsSorted[i]);
			}
		} else {
			varsSorted = allVarsSorted;
		}
		var importanceSorted = [];
		var fillColors = [];
		for (var i = 0; i < varsSorted.length; i++) {
			var importance = var2Importance[varsSorted[i]];
			importanceSorted.push(importance);
			fillColors.push(getColorByImportance(importance));
		}
		if (allVarsSorted.length > MAX_COLUMN_NUM) {
			varsSorted.push("......");
			importanceSorted.push(0);
		}
		var padding = {
				top:50,
				right:80,
				bottom:60,
				left:100
		};
		var scatterWidth = width - padding.left - padding.right,
			scatterHeight = height - padding.top - padding.bottom;
		var maxShowNum = 10;
		var svg = d3.select(domEle).append("svg").attr("width",width).attr("height",height);
		var importance = 0;
		var importance2Color = {};
		while (importance <= 1.0) {
			importance2Color[getColorByImportance(importance)] = importance.toFixed(1);
			importance += 0.2;
		}
		addLegend(svg,importance2Color);
		//x轴最大值处理
		var xMaxValue = 1.0;
		var xScale = d3.scale.linear()
						.domain([0,xMaxValue])
						.range([0,scatterWidth]);
		var yScale = d3.scale.ordinal()
					   .domain(varsSorted)
					   .rangeRoundBands([0, scatterHeight],0.5);

		var yScaleLine = d3.scale.linear()
						.domain([0,100])
						.range([0,scatterHeight]);
		var rect = svg.selectAll("rect")
		.data(importanceSorted)
		.enter()
		.append("rect")
		.attr("fill",function(d,i){
			return fillColors[i];
		})
		.attr("x",function(d,i){
			return padding.left;
		})
		.attr("y",function(d,i){
			return padding.top + yScale(varsSorted[i]);
		})
		.attr("width",function(d){
			if(d){
				return xScale(d);
			}else{
				return 0;
			}
		})
		.attr("height",yScale.rangeBand());

		for (var i = 0; i < importanceSorted.length; i++) {
			var data = importanceSorted[i];
			svg.append("text")
			.attr("x",padding.left + 45 + xScale(data))
			.attr("y",padding.top + yScale(varsSorted[i]))
			.attr('dy',yScale.rangeBand()/18+"em")
			.attr("fill","black")
			.attr('text-anchor','end')
			.text(TempoMineUtils.format(data,false))
		}
		var ticks = 5;
		var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(ticks);
		var yAxis = d3.svg.axis().scale(yScale).orient("left");
		var bottomEle = svg.append("g").attr("class","axisMin")
					   .attr("transform","translate("+padding.left+","+(scatterHeight + padding.top)+")")
					   .call(xAxis);
		var leftEle = svg.append("g").attr("class","axisMin")
		   .attr("transform","translate("+padding.left+","+ padding.top +")")
		   .call(yAxis);
		// 标签tooltip
		leftEle.selectAll("g").append("title")
					.data(varsSorted)
					.text(function(d,i){
						return d;
					});

		leftEle.selectAll("text").text(function(name){
			if (name.length > 8){
				name = name.substring(0,6)+"...";
			}
			return name;
		})
		var xAxisTitle = TempoUtils.locale("mine.bianliangzhongyaoxing");
	 	svg.append("text").text(xAxisTitle).attr("text-anchor", "middle")
		.attr("x", (padding.left + (width - padding.left) / 2) + "px").attr("y", (height - padding.bottom + 16) + "px").attr("dy", "2em");


 		var line=d3.svg.line()
 		.x(function(d){
 			return xScale(d.x) + padding.left;
 		})
 		.y(function(d){
 			return yScaleLine(d.y)+padding.top;
 		});

 		var xValue = 0.2;
 		while (xValue <= 1.0) {
 			svg.append('path')
 	 		.attr('fill','none')
 	 		.attr('stroke-width',0.4)
 	 		.style("stroke-opacity", 0.9)
 	 		.attr("stroke-dasharray","2,2")
 	 		.attr('stroke','#000000')
 	 		.attr('d',line([{x:xValue,y:0},{x:xValue,y:100}]));
 			xValue += 0.2
		}

 		svg.selectAll("text").style('font-family',TempoMineChartUtils.CHARTFAMILY);
	}


	/**
	 * 绘制网络图
	 * @param data需要的数据格式 ：{lay:[4,2,3,4],inputLabelArr:["a","b","c","d"],outputLabelArr:["h","j","f","t"]}<br/>
	 * contain绘制图形的容器
	 */
	TempoMineChartUtils.drawNetChart = function(para,contain){
		var toolTipId = "mine-neuralnetwork-nodetip";
		var toolTip = d3.select("body")
			.append("div").attr("class",
			"tempo-mine-neuralnetwork-node-tooltip")
			.attr("id", toolTipId).style(
			"opacity", 0.0);
		var INPUT_LAYER_MAX_NUM = 8;
		var HIDDEN_LAYER_MAX_NUM = 8;
		var OUTPUT_LAYER_MAX_NUM = 8;
		var layerList = TempoUtils.clone(para.layerList);//[4,14,8,10,4];
		if(!layerList || layerList.length == 0){
			return;
		}
		var inputLabelArr = TempoUtils.clone(para.inputFiledArr);
		var outputLabelArr = TempoUtils.clone(para.outputFiledArr);
		var flagArr = [false, false, false, false];
		for (var i = 0; i < layerList.length; i++) {
			if (i == 0) {
				if (layerList[i] > INPUT_LAYER_MAX_NUM) {
					layerList[i] = INPUT_LAYER_MAX_NUM;
					flagArr[i] = true;
					inputLabelArr = (inputLabelArr.slice(0,INPUT_LAYER_MAX_NUM/2)).concat(inputLabelArr.slice(-INPUT_LAYER_MAX_NUM/2));
				}
			}
			if (i == layerList.length-1) {
				if (layerList[i] > OUTPUT_LAYER_MAX_NUM) {
					layerList[i] = OUTPUT_LAYER_MAX_NUM;
					flagArr[i] = true;
					outputLabelArr = (outputLabelArr.slice(0,OUTPUT_LAYER_MAX_NUM/2)).concat(outputLabelArr.slice(-OUTPUT_LAYER_MAX_NUM/2));
				}
			}
			if (i >= 1 && i <= layerList.length-2) {
				if (layerList[i] > HIDDEN_LAYER_MAX_NUM) {
					layerList[i] = HIDDEN_LAYER_MAX_NUM;
					flagArr[i] = true;
				}
			}
		}
		// 画省略线
		var drawDash = function(svg, x1, y1, x2, y2) {
			svg.append("line")
			.attr("x1",x1)
			.attr("y1",y1)
			.attr("x2",x2)
			.attr("y2",y2)
			.attr("stroke","black")
			.attr("stroke-dasharray",'2','4')
			.attr("stroke-width","1px")
			.attr("fill","black");
		}
		//定义颜色数组循环根据隐层层数取值
		var colorArray = ["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3","#e5cf0d","#97b552","#95706d",
		                  "#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"];
		//svg宽
		//svg高
		//遍历lay，与inputLabelArr.length，outputLabelArr.length取最大值
		var maxVerticalLength = Math.max(inputLabelArr.length,outputLabelArr.length);
		for (var i = 0; i < layerList.length; i++) {
			maxVerticalLength = Math.max(maxVerticalLength,layerList[i]);
		}
		var svgHeight = 80 + maxVerticalLength * 40;
		var svgWidth = Math.max((120 + layerList.length * 80),svgHeight * 4/3);
		//圆点的半径
		var dotR = "10px";
		var dotRSize = 10;
		//在给出的容器中定义svg
		var svg = d3.select(contain[0])
		.append("svg")
		.attr("width",svgWidth)
		.attr("height",svgHeight);
		//根据层数计算各层级之间的水平间距排布
		var layHorizontalGap = svgWidth / (layerList.length + 1);
		//绘制起始标签
		//计算起始标签垂直间距
		var labelVerticalGap = svgHeight / (inputLabelArr.length + 1);
		svg.selectAll("rect")
		.data(inputLabelArr)
		.enter()
		.append("rect")
		.attr("x",0)
		.attr("y",function(d,i){ return labelVerticalGap * (i+1) - 8;})
		.attr("width",60)
		.attr("height",16)
		.attr("fill","#ADD87A");
		//绘制起始标签
		svg.selectAll("text")
		.data(inputLabelArr)
		.enter()
		.append("text")
		.attr("x",0)
		.attr("y",function(d,i){ return labelVerticalGap * (i+1);})
		.attr("dx",50)
		.attr("dy",5)
		.attr("fill","black")
		.attr("font-size",12)
		.text(function(d){
			if(d.length > 4){
				return d.substring(0,4) + "...";
			}
			return d;
		})
		.attr("title",function(d){
			return d;
		})
		.attr("text-anchor","end")
		.on("mouseover",function(){
			//悬浮第一次不展示数据一下代码
			// $(this).tooltip({content:d3.select(this).attr("title"),show: { effect: "blind", duration: 10 }});
			var toolTipTxt = d3.select(this).attr("title");
			//动态加载长度
			var width=50;
			var initLength=6;
			if(toolTipTxt.length>6){
				var length=toolTipTxt.length-initLength;
				width=width+length*10;
			}
			toolTip.html(toolTipTxt)
				.style("width",width + "px")
				.style("left", (d3.event.pageX) + "px")
				.style("top", (d3.event.pageY + 10) + "px")
				.style("opacity",1.0);
		})
		.on("mouseout",function(){
			toolTip.style("opacity", 0.0);
		});
		//绘制起始标签与第一层之间的横线连接
		var firstLayerDotNumber = layerList[0];
		for (var i = 0; i < firstLayerDotNumber; i++) {
			svg.append("line")
			.attr("x1",60)
			.attr("y1",labelVerticalGap * (i+1))
			.attr("x2",80)
			.attr("y2",labelVerticalGap * (i+1))
			.attr("stroke","black")
			.attr("stroke-width","1px")
			.attr("fill","black");
		}
		//绘制除了最后一层的点以及连线
		for (var i = 0; i < layerList.length - 1; i++) {
			//计算垂直间距
			var dotNumber = layerList[i];
			var verticalGap = svgHeight / (dotNumber + 1);
			//绘制连接到下一层的线段
			for (var m = 0; m < dotNumber; m++) {
				//计算下一层各个点的位置
				var nextLayNum = layerList[i+1];
				var nextLayVerticalGap = svgHeight/(nextLayNum + 1);
				for (var n = 0; n < nextLayNum; n++) {
					svg.append("line")
					.attr("x1",80 + layHorizontalGap * i)
					.attr("y1",verticalGap * (m + 1))
					.attr("x2",80 + layHorizontalGap * (i+1))
					.attr("y2",nextLayVerticalGap * (n+1))
					.attr("stroke","black")
					.attr("stroke-width","1px")
					.attr("fill","black");
				}
			}
			//绘制每一层的点
			for (var j = 0; j < dotNumber; j++) {
				svg.append("circle")
				.attr("cx",80 + layHorizontalGap * i)
				.attr("cy",verticalGap * (j + 1))
				.attr("r",dotR)
				.attr("fill",colorArray[i%colorArray.length]);
			}
			if (i == 0 && flagArr[i]) {
				// 画省略线
				drawDash(svg,80 + layHorizontalGap * i,
						verticalGap * INPUT_LAYER_MAX_NUM/2 + dotRSize + 4,
						80 + layHorizontalGap * i,
						verticalGap * (INPUT_LAYER_MAX_NUM/2+1) - dotRSize - 3);
			}

			if (i >= 1 && flagArr[i]) {
				// 画省略线
				drawDash(svg,80 + layHorizontalGap * i,
						verticalGap * HIDDEN_LAYER_MAX_NUM/2 + dotRSize + 4,
						80 + layHorizontalGap * i,
						verticalGap * (HIDDEN_LAYER_MAX_NUM/2+1) - dotRSize - 3);
			}
		}
		//绘制连接到终点的线段
		var lastLayerDotNum = layerList[layerList.length - 1];
		var labelOutVerticalGap = svgHeight / (outputLabelArr.length + 1);
		for (var i = 0; i < lastLayerDotNum; i++) {
			svg.append("line")
			.attr("x1",80 + layHorizontalGap * (layerList.length-1))
			.attr("y1",labelOutVerticalGap * (i + 1))
			.attr("x2",layerList.length >=4 ? (60 + layHorizontalGap * layerList.length):(120 + layHorizontalGap * (layerList.length-1)))
			.attr("y2",labelOutVerticalGap * (i+1))
			.attr("stroke","black")
			.attr("stroke-width","1px")
			.attr("fill","black");
			svg.append("rect")
			.attr("x",layerList.length >=4 ? (layHorizontalGap * layerList.length):(layHorizontalGap * (layerList.length-1)+100))
			.attr("y",labelOutVerticalGap * (i + 1) - 8)
			.attr("width",60)
			.attr("height",16)
			.attr("fill","#FFC800");
			//线段绘制完成添加结束的字符串
			svg.append("text")
			.attr("x",layerList.length >=4 ? (layHorizontalGap * layerList.length):(layHorizontalGap * (layerList.length-1)+100))
			.attr("y",labelOutVerticalGap * (i + 1))
			.attr("dx",25)
			.attr("dy",5)
			.attr("fill","black")
			.attr("font-size",12)
			.attr("title",outputLabelArr[i])
			.text(outputLabelArr[i].length > 4 ? (outputLabelArr[i].substring(0,4) + "...") : outputLabelArr[i])
			.attr("text-anchor","start")
			.on("mouseover",function(){
				//悬浮第一次不展示数据一下代码
				// $(this).tooltip({content:d3.select(this).attr("title"),show: { effect: "blind", duration: 10 }});
				var toolTipTxt = d3.select(this).attr("title");
				//动态加载长度
				var width=50;
				var initLength=6;
				if(toolTipTxt.length>6){
					var length=toolTipTxt.length-initLength;
					width=width+length*10;
				}
				toolTip.html(toolTipTxt)
					.style("width",width + "px")
					.style("left", (d3.event.pageX) + "px")
					.style("top", (d3.event.pageY + 10) + "px")
					.style("opacity",1.0);
			})
			.on("mouseout",function(){
				//$(this).tooltip('close');
				toolTip.style("opacity", 0.0);
			});
		}
		//绘制最后一层的点
		for (var j = 0; j < lastLayerDotNum; j++) {
			svg.append("circle")
			.attr("cx",80 + layHorizontalGap * (layerList.length - 1))
			.attr("cy",labelOutVerticalGap * (j + 1))
			.attr("r",dotR)
			.attr("fill",colorArray[(layerList.length - 1)%colorArray.length]);
		}
		if (flagArr[layerList.length - 1]) {
			// 画省略线
			drawDash(svg,80 + layHorizontalGap * (layerList.length - 1),
					labelOutVerticalGap * OUTPUT_LAYER_MAX_NUM/2 + dotRSize + 4,
					80 + layHorizontalGap * (layerList.length - 1),
					labelOutVerticalGap * (OUTPUT_LAYER_MAX_NUM/2+1) - dotRSize - 3);
		}
	};

})(jQuery);